<template>
	<a-card class="properties-panel" :body-style="{ padding: '10px' }">
		<template #title>
			<span>属性编辑</span>
			<a-button
				v-if="selectedBlock"
				style="float: right"
				type="primary"
				size="small"
				danger
				shape="circle"
				:icon="h(DeleteOutlined)"
				@click="deleteBlock" />
		</template>
		<div class="entity-container" v-if="selectedBlock">
			<div class="title">名称</div>
			<div class="item-wrapper">
				<a-input style="margin-top: 8px" :maxlength="15" @change="updateBlock" v-model:value="formData.name" class="input"/>
			</div>
			<div class="title">基础配置</div>
			<div class="item-wrapper">
				<div class="item-label">
					<div class="label-item">长 (m)</div>
					<div class="label-item">宽 (m)</div>
				</div>
				<div class="item-input">
					<div class="input-item">
						<a-input-number min="0.5" max="10" @change="updateBlock" v-model:value="formData.length" class="input"/>
					</div>
					<div class="input-item">
						<a-input-number min="0.5" max="10" @change="updateBlock" v-model:value="formData.width" class="input"/>
					</div>
				</div>
			</div>
			<div class="item-wrapper">
				<div class="item-label">
					<div class="label-item">颜色</div>
				</div>
				<div class="item-input">
					<div class="input-item">
						<input class="color-picker" type="color" v-model="formData.color" @input="updateBlock">
					</div>
				</div>
			</div>
			<div class="title">坐标信息</div>
			<div class="item-wrapper">
				<div class="item-label">
					<div class="label-item">X坐标 (m)</div>
					<div class="label-item">Y坐标 (m)</div>
				</div>
				<div class="item-input">
					<div class="input-item">
						<a-input-number step="0.1" :precision="3" @change="updateBlock" v-model:value="formData.x" class="input"/>
					</div>
					<div class="input-item">
						<a-input-number step="0.1" :precision="3" @change="updateBlock" v-model:value="formData.y" class="input"/>
					</div>
				</div>
			</div>
			<div class="item-wrapper">
				<div class="item-label">
					<div class="label-item">经度</div>
					<div class="label-item">纬度</div>
				</div>
				<div class="item-input">
					<div class="input-item">
						<a-input-number class="input"/>
					</div>
					<div class="input-item">
						<a-input-number class="input"/>
					</div>
				</div>
			</div>
			<div class="item-wrapper">
				<div class="item-label">
					<div class="label-item">航向角 (°)</div>
				</div>
				<div class="item-input">
					<div class="input-item">
						<a-input-number min="0" max="359" step="0.1" :precision="3" @change="updateBlock" v-model:value="formData.heading" class="input"/>
					</div>
				</div>
			</div>
		</div>

		<div v-else class="no-selection">
			<a-empty
				description="请在画布上选择一个元素进行编辑"
			/>
		</div>
	</a-card>
</template>

<script setup lang="ts">
import {h, ref, onUnmounted} from 'vue';
import type {Block} from '@/types';
import {useBlocksStore} from '@/store/modules/blocks';
import eventBus, {Events} from '@/event-bus';
import {DeleteOutlined} from '@ant-design/icons-vue'
// 块状态
const blocksStore = useBlocksStore();
// 当前选中的块
const selectedBlock = ref<Block | null>(null);
// 表单数据
const formData = ref({
	name: '',
	x: 0,
	y: 0,
	heading: 0,
	length: 0,
	width: 0,
	color: ''
});
eventBus.on(Events.BLOCK_UPDATED, (block: Block | null) => {
	if (block) {
		// 填充表单数据
		formData.value = {
			name: block.name,
			x: block.x,
			y: block.y,
			heading: block.heading,
			length: block.collision.l1,
			width: block.collision.l2,
			color: block.color
		};
	}
});
// 监听块选中事件
eventBus.on(Events.BLOCK_SELECTED, (block: Block | null) => {
	selectedBlock.value = block;

	if (block) {
		// 填充表单数据
		formData.value = {
			name: block.name,
			x: block.x,
			y: block.y,
			heading: block.heading,
			length: block.collision.l1,
			width: block.collision.l2,
			color: block.color
		};
	}
});

// 更新块属性
const updateBlock = () => {
	if (selectedBlock.value) {
		blocksStore.updateBlock(selectedBlock.value.id, {
			name: formData.value.name,
			x: Number(formData.value.x),
			y: Number(formData.value.y),
			heading: Number(formData.value.heading),
			collision: {
				l1: Number(formData.value.length),
				l2: Number(formData.value.width)
			},
			color: formData.value.color
		});
	}
};

// 删除块
const deleteBlock = () => {
	if (selectedBlock.value) {
		blocksStore.deleteBlock(selectedBlock.value.id);
	}
	selectedBlock.value = null
};

// 清理事件监听
const cleanup = () => {
	eventBus.off(Events.BLOCK_SELECTED);
};

// 组件卸载时清理
onUnmounted(cleanup);
</script>

<style scoped>
.properties-panel {
	width: 280px;
	height: 100%;
	overflow-y: auto;
	border-radius: 0;
	border-left: 1px solid #e8e8e8;
	border-top: none;
	border-bottom: none;
}

.no-selection {
	padding: 40px 20px;
	text-align: center;
}

.entity-container {
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
	width: 260px;
	height: 100%;
	overflow-y: scroll;
}

.entity-container > :first-child {
	margin: 0 0 0 5px;
}

.title {
	font-size: 13px;
	margin: 10px 0 0 5px;
	font-weight: bolder;
}

.item-wrapper {
	padding-left: 10px;
}

.item-label {
	display: flex;
	justify-content: space-between;
}

.label-item {
	width: 49%;
	font-size: 13px;
	margin: 5px 0;
	color: #9b9b9b;
}

.item-input {
	display: flex;
	justify-content: space-between;
}

.input-item {
	width: 49%;
	padding-right: 20px;
}

.input {
	font-size: 12px;
}
.color-picker{
	width: 90%;
	height: 34px;
	padding: 0 5px;
	background-color: transparent;
	border: 1px solid #d5d5d5;
	border-radius: 5px;
	transition: all 0.2s
}
</style>
